<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Neon Template</title>
    <link rel="stylesheet" href="../css/landing.css" />
  </head>
  <body class="has-animations">
    <div class="body-wrap">
      <header class="site-header">
        <div class="container">
          <div class="site-header-inner">
            <div class="brand">
              <h1 class="m-0">
                <a href="../landing.html"
                  ><img
                    src="../images/logo.svg"
                    alt="Neon"
                    width="32"
                    height="32"
                /></a>
              </h1>
            </div>
            <button
              id="header-nav-toggle"
              class="header-nav-toggle"
              aria-controls="primary-menu"
              aria-expanded="false"
            >
              <span class="screen-reader">Menu</span>
              <span class="hamburger"
                ><span class="hamburger-inner"></span
              ></span>
            </button>
            <nav id="header-nav" class="header-nav">
              <div class="header-nav-inner">
                <ul class="list-reset text-xxs header-nav-right">
                  <li><a href="additional.html">Secondary page</a></li>
                </ul>
                <ul class="list-reset header-nav-right">
                  <li>
                    <a
                      class="button button-primary button-sm"
                      href="signup.html"
                      >Sign up</a
                    >
                  </li>
                </ul>
              </div>
            </nav>
          </div>
        </div>
      </header>
      <main class="site-content">
        <section class="pricing section illustration-section-02">
          <div class="container">
            <div class="pricing-inner section-inner">
              <div class="section-header center-content reveal-from-bottom">
                <div class="container-xs">
                  <h1 class="m-0">
                    Engage Your Visitors with a beautiful template
                  </h1>
                </div>
              </div>
              <div class="pricing-switcher center-content reveal-from-top">
                <label class="form-switch"
                  ><input
                    id="pricing-toggle"
                    type="checkbox"
                    name="pricing-toggle"
                    checked="checked"
                  />
                  <span class="form-switch-icon"></span>
                  <span>Billed Monthly</span>
                  <span>Billed Annually</span></label
                >
              </div>
              <div class="tiles-wrap">
                <div
                  class="tiles-item reveal-from-right"
                  data-reveal-delay="400"
                >
                  <div class="tiles-item-inner">
                    <div class="pricing-item-content">
                      <div class="pricing-item-header pb-24 mb-24">
                        <div class="pricing-item-price mb-4">
                          <span class="pricing-item-price-currency h3">$</span
                          ><span
                            class="pricing-item-price-amount h1 pricing-switchable"
                            data-pricing-monthly="34"
                            data-pricing-yearly="27"
                            >27</span
                          ><span class="text-sm">/m</span>
                        </div>
                        <div class="text-xs text-color-low">
                          Lorem ipsum is a common text
                        </div>
                      </div>
                      <div class="pricing-item-features mb-40">
                        <div
                          class="pricing-item-features-title h6 text-xs text-color-high mb-24"
                        >
                          What’s included
                        </div>
                        <ul
                          class="pricing-item-features-list list-reset text-xs mb-32"
                        >
                          <li class="is-checked">
                            Excepteur sint occaecat velit
                          </li>
                          <li class="is-checked">
                            Excepteur sint occaecat velit
                          </li>
                          <li class="is-checked">
                            Excepteur sint occaecat velit
                          </li>
                          <li>Excepteur sint occaecat velit</li>
                          <li>Excepteur sint occaecat velit</li>
                        </ul>
                      </div>
                    </div>
                    <div class="pricing-item-cta mb-8">
                      <a class="button button-primary button-block" href="#"
                        >Start free trial</a
                      >
                    </div>
                  </div>
                </div>
                <div
                  class="tiles-item reveal-from-bottom"
                  data-reveal-delay="200"
                >
                  <div class="tiles-item-inner">
                    <div class="pricing-item-content">
                      <div class="pricing-item-header pb-24 mb-24">
                        <div class="pricing-item-price mb-4">
                          <span class="pricing-item-price-currency h3">$</span
                          ><span
                            class="pricing-item-price-amount h1 pricing-switchable"
                            data-pricing-monthly="54"
                            data-pricing-yearly="47"
                            >47</span
                          ><span class="text-sm">/m</span>
                        </div>
                        <div class="text-xs text-color-low">
                          Lorem ipsum is a common text
                        </div>
                      </div>
                      <div class="pricing-item-features mb-40">
                        <div
                          class="pricing-item-features-title h6 text-xs text-color-high mb-24"
                        >
                          What’s included
                        </div>
                        <ul
                          class="pricing-item-features-list list-reset text-xs mb-32"
                        >
                          <li class="is-checked">
                            Excepteur sint occaecat velit
                          </li>
                          <li class="is-checked">
                            Excepteur sint occaecat velit
                          </li>
                          <li class="is-checked">
                            Excepteur sint occaecat velit
                          </li>
                          <li class="is-checked">
                            Excepteur sint occaecat velit
                          </li>
                          <li>Excepteur sint occaecat velit</li>
                        </ul>
                      </div>
                    </div>
                    <div class="pricing-item-cta mb-8">
                      <a class="button button-primary button-block" href="#"
                        >Start free trial</a
                      >
                    </div>
                  </div>
                </div>
                <div
                  class="tiles-item reveal-from-left"
                  data-reveal-delay="400"
                >
                  <div class="tiles-item-inner">
                    <div class="pricing-item-content">
                      <div class="pricing-item-header pb-24 mb-24">
                        <div class="pricing-item-price mb-4">
                          <span class="pricing-item-price-currency h3">$</span
                          ><span
                            class="pricing-item-price-amount h1 pricing-switchable"
                            data-pricing-monthly="74"
                            data-pricing-yearly="67"
                            >67</span
                          ><span class="text-sm">/m</span>
                        </div>
                        <div class="text-xs text-color-low">
                          Lorem ipsum is a common text
                        </div>
                      </div>
                      <div class="pricing-item-features mb-40">
                        <div
                          class="pricing-item-features-title h6 text-xs text-color-high mb-24"
                        >
                          What’s included
                        </div>
                        <ul
                          class="pricing-item-features-list list-reset text-xs mb-32"
                        >
                          <li class="is-checked">
                            Excepteur sint occaecat velit
                          </li>
                          <li class="is-checked">
                            Excepteur sint occaecat velit
                          </li>
                          <li class="is-checked">
                            Excepteur sint occaecat velit
                          </li>
                          <li class="is-checked">
                            Excepteur sint occaecat velit
                          </li>
                          <li class="is-checked">
                            Excepteur sint occaecat velit
                          </li>
                        </ul>
                      </div>
                    </div>
                    <div class="pricing-item-cta mb-8">
                      <a class="button button-primary button-block" href="#"
                        >Start free trial</a
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section class="team section center-content">
          <div class="container">
            <div class="team-inner section-inner has-top-divider">
              <div class="section-header center-content reveal-from-bottom">
                <div class="container-xs">
                  <h2 class="mt-0 mb-16">
                    Meet the team - Lorem ipsum is placeholder text.
                  </h2>
                  <p class="m-0">
                    Duis aute irure dolor in reprehenderit in voluptate velit
                    esse cillum dolore eu fugiat nulla pariatur excepteur sint —
                    occaecat cupidatat non proident, sunt in culpa qui.
                  </p>
                </div>
              </div>
              <div class="tiles-wrap">
                <div class="tiles-item reveal-from-bottom">
                  <div class="tiles-item-inner">
                    <div class="team-item-header">
                      <div class="team-item-image mb-24">
                        <img
                          src="../images/team-member-01.jpg"
                          alt="Team member 01"
                          width="180"
                          height="180"
                        />
                      </div>
                    </div>
                    <div class="team-item-content">
                      <h5 class="team-item-name mt-0 mb-4">Markus Hasinika</h5>
                      <div
                        class="team-item-role text-xxs fw-500 tt-u text-color-primary mb-8"
                      >
                        Founder & CEO
                      </div>
                      <p class="m-0 text-sm">
                        Magnis dis parturient montes nascetur. Quam quisque id
                        diam vel quam ultricies leo integer.
                      </p>
                    </div>
                  </div>
                </div>
                <div
                  class="tiles-item reveal-from-bottom"
                  data-reveal-delay="200"
                >
                  <div class="tiles-item-inner">
                    <div class="team-item-header">
                      <div class="team-item-image mb-24">
                        <img
                          src="../images/team-member-02.jpg"
                          alt="Team member 02"
                          width="180"
                          height="180"
                        />
                      </div>
                    </div>
                    <div class="team-item-content">
                      <h5 class="team-item-name mt-0 mb-4">Diana Stafford</h5>
                      <div
                        class="team-item-role text-xxs fw-500 tt-u text-color-primary mb-8"
                      >
                        Founder & CEO
                      </div>
                      <p class="m-0 text-sm">
                        Magnis dis parturient montes nascetur. Quam quisque id
                        diam vel quam ultricies leo integer.
                      </p>
                    </div>
                  </div>
                </div>
                <div
                  class="tiles-item reveal-from-bottom"
                  data-reveal-delay="400"
                >
                  <div class="tiles-item-inner">
                    <div class="team-item-header">
                      <div class="team-item-image mb-24">
                        <img
                          src="../images/team-member-03.jpg"
                          alt="Team member 03"
                          width="180"
                          height="180"
                        />
                      </div>
                    </div>
                    <div class="team-item-content">
                      <h5 class="team-item-name mt-0 mb-4">Patricia Collins</h5>
                      <div
                        class="team-item-role text-xxs fw-500 tt-u text-color-primary mb-8"
                      >
                        Founder & CEO
                      </div>
                      <p class="m-0 text-sm">
                        Magnis dis parturient montes nascetur. Quam quisque id
                        diam vel quam ultricies leo integer.
                      </p>
                    </div>
                  </div>
                </div>
                <div class="tiles-item reveal-from-bottom">
                  <div class="tiles-item-inner">
                    <div class="team-item-header">
                      <div class="team-item-image mb-24">
                        <img
                          src="../images/team-member-04.jpg"
                          alt="Team member 04"
                          width="180"
                          height="180"
                        />
                      </div>
                    </div>
                    <div class="team-item-content">
                      <h5 class="team-item-name mt-0 mb-4">Anton Klenkov</h5>
                      <div
                        class="team-item-role text-xxs fw-500 tt-u text-color-primary mb-8"
                      >
                        Founder & CEO
                      </div>
                      <p class="m-0 text-sm">
                        Magnis dis parturient montes nascetur. Quam quisque id
                        diam vel quam ultricies leo integer.
                      </p>
                    </div>
                  </div>
                </div>
                <div
                  class="tiles-item reveal-from-bottom"
                  data-reveal-delay="200"
                >
                  <div class="tiles-item-inner">
                    <div class="team-item-header">
                      <div class="team-item-image mb-24">
                        <img
                          src="../images/team-member-05.jpg"
                          alt="Team member 05"
                          width="180"
                          height="180"
                        />
                      </div>
                    </div>
                    <div class="team-item-content">
                      <h5 class="team-item-name mt-0 mb-4">Nick Kornilov</h5>
                      <div
                        class="team-item-role text-xxs fw-500 tt-u text-color-primary mb-8"
                      >
                        Founder & CEO
                      </div>
                      <p class="m-0 text-sm">
                        Magnis dis parturient montes nascetur. Quam quisque id
                        diam vel quam ultricies leo integer.
                      </p>
                    </div>
                  </div>
                </div>
                <div
                  class="tiles-item reveal-from-bottom"
                  data-reveal-delay="400"
                >
                  <div class="tiles-item-inner">
                    <div class="team-item-header">
                      <div class="team-item-image mb-24">
                        <img
                          src="../images/team-member-06.jpg"
                          alt="Team member 01"
                          width="180"
                          height="180"
                        />
                      </div>
                    </div>
                    <div class="team-item-content">
                      <h5 class="team-item-name mt-0 mb-4">Andrea Engler</h5>
                      <div
                        class="team-item-role text-xxs fw-500 tt-u text-color-primary mb-8"
                      >
                        Founder & CEO
                      </div>
                      <p class="m-0 text-sm">
                        Magnis dis parturient montes nascetur. Quam quisque id
                        diam vel quam ultricies leo integer.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section class="clients section reveal-fade">
          <div class="container">
            <div
              class="clients-inner section-inner has-top-divider has-bottom-divider"
            >
              <ul class="list-reset">
                <li class="reveal-from-top">
                  <img src="images/clients-01.svg" alt="Clients 01" />
                </li>
                <li class="reveal-from-bottom" data-reveal-delay="150">
                  <img src="images/clients-02.svg" alt="Clients 02" />
                </li>

                <li class="reveal-from-top" data-reveal-delay="300">
                  <img src="images/clients-03.svg" alt="Clients 03" />
                </li>

                <li class="reveal-from-bottom" data-reveal-delay="450">
                  <img src="images/clients-04.svg" alt="Clients 04" />
                </li>

                <li class="reveal-from-top" data-reveal-delay="600">
                  <img src="images/clients-05.svg" alt="Clients 05" />
                </li>
              </ul>
            </div>
          </div>
        </section>

        Video
        <section class="section center-content">
          <div class="container">
            <div class="section-inner">
              <div class="section-header reveal-from-bottom">
                <div class="container-xs">
                  <h2 class="mt-0 mb-16">Built exclusively for you</h2>
                  <p class="m-0">
                    Duis aute irure dolor in reprehenderit in voluptate velit
                    esse cillum dolore eu fugiat nulla pariatur excepteur sint —
                    occaecat cupidatat non proident, sunt in culpa qui.
                  </p>
                </div>
              </div>
              <div class="reveal-from-bottom">
                <a
                  class="modal-trigger"
                  aria-controls="modal-01"
                  data-video="https://player.vimeo.com/video/174002812"
                  href="#"
                  ><img
                    src="images/video-placeholder.svg"
                    alt="Video"
                    width="712"
                    height="400"
                /></a>
              </div>
              <div id="modal-01" class="modal modal-video">
                <div class="modal-inner">
                  <div class="responsive-video">
                    <iframe
                      src="#"
                      frameborder="0"
                      webkitallowfullscreen
                      mozallowfullscreen
                      allowfullscreen
                    ></iframe>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <!--        End Video-->

        <section class="testimonial section">
          <div class="container">
            <div class="testimonial-inner section-inner has-top-divider">
              <div class="section-header center-content">
                <div class="container-xs">
                  <h2 class="mt-0 mb-16">Don't take our word for it</h2>
                  <p class="m-0">
                    Duis aute irure dolor in reprehenderit in voluptate velit
                    esse cillum dolore eu fugiat nulla pariatur excepteur sint —
                    occaecat cupidatat non proident, sunt in culpa qui.
                  </p>
                </div>
              </div>
              <div class="tiles-wrap">
                <div
                  class="tiles-item reveal-from-right"
                  data-reveal-delay="200"
                >
                  <div class="tiles-item-inner">
                    <div class="testimonial-item-content">
                      <p class="text-sm mb-0">
                        — Duis aute irure dolor in reprehenderit in voluptate
                        velit esse cillum dolore eu fugiat nulla pariatur.
                        Excepteur sint occaecat cupidatat non proident, sunt in
                        culpa qui officia deserunt mollit anim id est laborum
                        cillum dolore eu fugiat.
                      </p>
                    </div>
                    <div
                      class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"
                    >
                      <span class="testimonial-item-name text-color-high"
                        >Roman Level</span
                      >
                      <span class="text-color-low">/ </span
                      ><span class="testimonial-item-link"
                        ><a href="#">AppName</a></span
                      >
                    </div>
                  </div>
                </div>
                <div class="tiles-item reveal-from-bottom">
                  <div class="tiles-item-inner">
                    <div class="testimonial-item-content">
                      <p class="text-sm mb-0">
                        — Duis aute irure dolor in reprehenderit in voluptate
                        velit esse cillum dolore eu fugiat nulla pariatur.
                        Excepteur sint occaecat cupidatat non proident, sunt in
                        culpa qui officia deserunt mollit anim id est laborum
                        cillum dolore eu fugiat.
                      </p>
                    </div>
                    <div
                      class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"
                    >
                      <span class="testimonial-item-name text-color-high"
                        >Diana Rynzhuk</span
                      >
                      <span class="text-color-low">/ </span
                      ><span class="testimonial-item-link"
                        ><a href="#">AppName</a></span
                      >
                    </div>
                  </div>
                </div>
                <div
                  class="tiles-item reveal-from-left"
                  data-reveal-delay="200"
                >
                  <div class="tiles-item-inner">
                    <div class="testimonial-item-content">
                      <p class="text-sm mb-0">
                        — Duis aute irure dolor in reprehenderit in voluptate
                        velit esse cillum dolore eu fugiat nulla pariatur.
                        Excepteur sint occaecat cupidatat non proident, sunt in
                        culpa qui officia deserunt mollit anim id est laborum
                        cillum dolore eu fugiat.
                      </p>
                    </div>
                    <div
                      class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"
                    >
                      <span class="testimonial-item-name text-color-high"
                        >Ben Stafford</span
                      >
                      <span class="text-color-low">/ </span
                      ><span class="testimonial-item-link"
                        ><a href="#">AppName</a></span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section class="cta section center-content-mobile reveal-from-bottom">
          <div class="container">
            <div class="cta-inner section-inner cta-split">
              <div class="cta-slogan">
                <h3 class="m-0">For previewing layouts and visual?</h3>
              </div>
              <div class="cta-action">
                <div class="has-icon-right">
                  <label for="newsletter" class="form-label screen-reader"
                    >Subscribe</label
                  >
                  <input
                    id="newsletter"
                    class="form-input"
                    type="email"
                    placeholder="Your best email"
                  />
                  <svg
                    width="16"
                    height="12"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 5H1c-.6 0-1 .4-1 1s.4 1 1 1h8v5l7-6-7-6v5z"
                      fill="#376DF9"
                      fill-rule="nonzero"
                    />
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section class="features-split section">
          <div class="container">
            <div class="features-split-inner section-inner has-top-divider">
              <div class="section-header center-content">
                <div class="container-xs">
                  <h2 class="mt-0 mb-16">
                    Features - Lorem ipsum is placeholder text.
                  </h2>
                  <p class="m-0">
                    Duis aute irure dolor in reprehenderit in voluptate velit
                    esse cillum dolore eu fugiat nulla pariatur excepteur sint —
                    occaecat cupidatat non proident, sunt in culpa qui.
                  </p>
                </div>
              </div>
              <div class="split-wrap invert-mobile">
                <div class="split-item">
                  <div
                    class="split-item-content center-content-mobile reveal-from-right"
                    data-reveal-container=".split-item"
                  >
                    <h3 class="mt-0 mb-12">Data-driven insights</h3>
                    <p class="m-0">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                      sed do eiusmod tempor incididunt ut labore et dolore magna
                      aliqua — Ut enim ad minim veniam, quis nostrud
                      exercitation ullamco laboris nisi ut aliquip ex ea commodo
                      consequat.
                    </p>
                  </div>
                  <div
                    class="split-item-image split-item-image-fill reveal-from-left"
                    data-reveal-container=".split-item"
                  >
                    <img
                      src="../images/features-split-image-01.svg"
                      alt="Features split image 01"
                      width="528"
                      height="396"
                    />
                  </div>
                </div>
                <div class="split-item">
                  <div
                    class="split-item-content center-content-mobile reveal-from-left"
                    data-reveal-container=".split-item"
                  >
                    <h3 class="mt-0 mb-12">Data-driven insights</h3>
                    <p class="m-0">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                      sed do eiusmod tempor incididunt ut labore et dolore magna
                      aliqua — Ut enim ad minim veniam, quis nostrud
                      exercitation ullamco laboris nisi ut aliquip ex ea commodo
                      consequat.
                    </p>
                  </div>
                  <div
                    class="split-item-image split-item-image-fill reveal-from-right"
                    data-reveal-container=".split-item"
                  >
                    <img
                      src="../images/features-split-image-02.svg"
                      alt="Features split image 02"
                      width="528"
                      height="396"
                    />
                  </div>
                </div>
                <div class="split-item">
                  <div
                    class="split-item-content center-content-mobile reveal-from-right"
                    data-reveal-container=".split-item"
                  >
                    <h3 class="mt-0 mb-12">Data-driven insights</h3>
                    <p class="m-0">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                      sed do eiusmod tempor incididunt ut labore et dolore magna
                      aliqua — Ut enim ad minim veniam, quis nostrud
                      exercitation ullamco laboris nisi ut aliquip ex ea commodo
                      consequat.
                    </p>
                  </div>
                  <div
                    class="split-item-image split-item-image-fill reveal-from-left"
                    data-reveal-container=".split-item"
                  >
                    <img
                      src="../images/features-split-image-01.svg"
                      alt="Features split image 03"
                      width="528"
                      height="396"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section class="section">
          <div class="container">
            <div class="section-inner has-top-divider">
              <div class="container-xs">
                <h2 class="mt-0">
                  Lorem ipsum is placeholder text commonly used in the graphic.
                </h2>
                <p>
                  Lorem ipsum dolor sit amet,
                  <a href="#">consectetur adipiscing elit</a>, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                  minim veniam, quis nostrud exercitation ullamco laboris nisi
                  ut aliquip ex ea commodo consequat.
                </p>
                <p>
                  Duis aute irure dolor in reprehenderit in voluptate velit esse
                  cillum dolore eu fugiat nulla pariatur. Excepteur sint
                  occaecat cupidatat non proident, sunt in culpa qui officia
                  deserunt mollit anim id est laborum.
                </p>
                <figure>
                  <img
                    class="image-larger"
                    src="../images/image-placeholder.svg"
                    alt="Image placeholder"
                    width="712"
                    height="400"
                  />
                  <figcaption class="text-color-low">
                    A super-nice image
                    <span role="img" aria-label="smile">😀</span>
                  </figcaption>
                </figure>
                <h4>Flexibility</h4>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
                  laboris nisi ut aliquip ex ea commodo consequat sint occaecat
                  cupidatat non proident, sunt in culpa qui officia deserunt
                  mollit anim id est laborum.
                </p>
                <ul>
                  <li>Lorem ipsum dolor sit amet, consectetur.</li>
                  <li>Lorem ipsum dolor sit amet, consectetur.</li>
                  <li>Lorem ipsum dolor sit amet, consectetur.</li>
                </ul>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
                  laboris.
                </p>
              </div>
            </div>
          </div>
        </section>
        <section class="section">
          <div class="container">
            <div class="section-inner has-top-divider">
              <div class="container-xs">
                <div class="section-header center-content">
                  <h2 class="m-0">
                    Modal - Lorem ipsum is placeholder text commonly used.
                  </h2>
                </div>
                <div class="center-content">
                  <a
                    class="button button-primary modal-trigger"
                    aria-controls="modal-01"
                    href="#"
                    >Open modal</a
                  >
                </div>
                <div id="modal-01" class="modal">
                  <div class="modal-inner">
                    <button
                      class="modal-close modal-close-trigger"
                      aria-label="close"
                    ></button>
                    <div class="modal-content">
                      <div class="center-content">
                        <h3 class="mt-16 mb-12">Join our newsletter</h3>
                        <p class="text-sm">
                          Lorem ipsum dolor sit amet, consectetur adipiscing
                          elit, sed do eiusmod.
                        </p>
                      </div>
                      <form style="max-width: 320px; margin: 0 auto;">
                        <div class="mb-12">
                          <input
                            class="form-input"
                            type="email"
                            id="modal-input"
                            placeholder="Your best email"
                          />
                        </div>

                        <button class="button button-primary button-block">
                          Subscribe
                        </button>
                      </form>
                      <div class="center-content mt-24">
                        <a
                          class="text-xxs fw-500 tt-u modal-close-trigger"
                          aria-label="close"
                          href="#0"
                          >No thanks!</a
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section class="section center-content">
          <div class="container">
            <div class="section-inner has-top-divider">
              <div class="container-xs">
                <div class="section-header">
                  <h2 class="m-0">
                    Buttons - Lorem ipsum is placeholder text commonly used.
                  </h2>
                </div>
                <div class="button-group">
                  <a class="button button-primary button-wide-mobile" href="#"
                    >Get started now</a
                  >
                  <a class="button button-secondary button-wide-mobile" href="#"
                    >Get started now</a
                  >
                </div>
                <div class="button-group">
                  <a class="button button-dark button-wide-mobile" href="#"
                    >Get started now</a
                  >
                  <a class="button button-wide-mobile" href="#"
                    >Get started now</a
                  >
                </div>
              </div>
            </div>
          </div>
        </section>
        <section class="section">
          <div class="container">
            <div class="section-inner has-top-divider">
              <div class="container-xs">
                <div class="section-header center-content">
                  <h2 class="m-0">
                    Input forms - Lorem ipsum is placeholder text commonly used.
                  </h2>
                </div>
                <form style="max-width: 420px; margin: 0 auto;">
                  <div class="mb-24">
                    <label class="form-label screen-reader" for="input-01"
                      >This is a label</label
                    >
                    <div class="form-group-desktop">
                      <input
                        class="form-input"
                        type="email"
                        id="input-01"
                        placeholder="Your best email"
                      />
                      <button class="button button-primary">
                        Early access
                      </button>
                    </div>
                  </div>
                  <div class="mb-24">
                    <label class="form-label screen-reader" for="input-02"
                      >This is a label</label
                    >
                    <div class="form-group-desktop">
                      <input
                        class="form-input"
                        type="email"
                        id="input-02"
                        placeholder="Your best email"
                        value="hello@cruip.com"
                      />
                      <button class="button button-primary is-loading">
                        Early access
                      </button>
                    </div>
                  </div>
                  <div class="mb-24">
                    <label class="form-label screen-reader" for="input-03"
                      >This is a label</label
                    >
                    <div class="form-group-desktop">
                      <input
                        class="form-input form-error"
                        type="email"
                        id="input-03"
                        placeholder="Your best email"
                      />
                      <button class="button button-primary">
                        Early access
                      </button>
                    </div>
                    <div class="form-hint text-color-error">
                      Something is wrong.
                    </div>
                  </div>
                  <div class="mb-24">
                    <label class="form-label screen-reader" for="input-04"
                      >This is a label</label
                    >
                    <div class="form-group-desktop">
                      <input
                        class="form-input form-success"
                        type="email"
                        id="input-04"
                        placeholder="Your best email"
                      />
                      <button class="button button-primary">
                        Early access
                      </button>
                    </div>
                    <div class="form-hint text-color-success">
                      You’ve done it.
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </section>
        <section class="section">
          <div class="container">
            <div class="section-inner has-top-divider">
              <div class="container-xs">
                <div class="section-header center-content">
                  <h2 class="m-0">
                    FAQ - Lorem ipsum is placeholder text commonly used.
                  </h2>
                </div>
                <ul class="accordion list-reset mb-0">
                  <li class="is-active">
                    <div class="accordion-header text-sm">
                      <span class="h6 m-0"
                        >Nisi porta lorem mollis aliquam ut.</span
                      >
                      <div class="accordion-icon"></div>
                    </div>
                    <div class="accordion-content text-xs">
                      <p>
                        Lorem ipsum is placeholder text commonly used in the
                        graphic, print, and publishing industries for previewing
                        layouts and visual mockups.
                      </p>
                    </div>
                  </li>
                  <li>
                    <div class="accordion-header text-sm">
                      <span class="h6 m-0"
                        >Nisi porta lorem mollis aliquam ut.</span
                      >
                      <div class="accordion-icon"></div>
                    </div>
                    <div class="accordion-content text-xs">
                      <p>
                        Lorem ipsum is placeholder text commonly used in the
                        graphic, print, and publishing industries for previewing
                        layouts and visual mockups.
                      </p>
                    </div>
                  </li>
                  <li>
                    <div class="accordion-header text-sm">
                      <span class="h6 m-0"
                        >Nisi porta lorem mollis aliquam ut.</span
                      >
                      <div class="accordion-icon"></div>
                    </div>
                    <div class="accordion-content text-xs">
                      <p>
                        Lorem ipsum is placeholder text commonly used in the
                        graphic, print, and publishing industries for previewing
                        layouts and visual mockups.
                      </p>
                    </div>
                  </li>
                  <li>
                    <div class="accordion-header text-sm">
                      <span class="h6 m-0"
                        >Nisi porta lorem mollis aliquam ut.</span
                      >
                      <div class="accordion-icon"></div>
                    </div>
                    <div class="accordion-content text-xs">
                      <p>
                        Lorem ipsum is placeholder text commonly used in the
                        graphic, print, and publishing industries for previewing
                        layouts and visual mockups.
                      </p>
                    </div>
                  </li>
                  <li>
                    <div class="accordion-header text-sm">
                      <span class="h6 m-0"
                        >Nisi porta lorem mollis aliquam ut.</span
                      >
                      <div class="accordion-icon"></div>
                    </div>
                    <div class="accordion-content text-xs">
                      <p>
                        Lorem ipsum is placeholder text commonly used in the
                        graphic, print, and publishing industries for previewing
                        layouts and visual mockups.
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </section>
        <section class="cta section center-content-mobile reveal-from-bottom">
          <div class="container">
            <div class="cta-inner section-inner cta-split">
              <div class="cta-slogan">
                <h3 class="m-0">For previewing layouts and visual?</h3>
              </div>
              <div class="cta-action">
                <div class="has-icon-right">
                  <label for="newsletter" class="form-label screen-reader"
                    >Subscribe</label
                  >
                  <input
                    id="newsletter"
                    class="form-input"
                    type="text"
                    placeholder="Username"
                  />
                  <svg
                    width="16"
                    height="12"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 5H1c-.6 0-1 .4-1 1s.4 1 1 1h8v5l7-6-7-6v5z"
                      fill="#376DF9"
                      fill-rule="nonzero"
                    />
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
      <footer class="site-footer">
        <div class="container">
          <div class="site-footer-inner has-top-divider">
            <div class="footer-top text-xxs">
              <div class="footer-blocks">
                <div class="footer-block">
                  <div class="brand mb-16">
                    <a href="../landing.html"
                      ><img
                        src="../images/logo.svg"
                        alt="Neon"
                        width="32"
                        height="32"
                    /></a>
                  </div>
                  <div class="footer-copyright">
                    &copy; 2019 Neon, all rights reserved
                  </div>
                </div>
                <div class="footer-block">
                  <div class="footer-block-title">Company</div>
                  <ul class="list-reset mb-0">
                    <li><a href="#">Dummy text used</a></li>
                    <li><a href="#">The purpose of lorem</a></li>
                    <li><a href="#">Filler text can be very useful</a></li>
                    <li><a href="#">Be on design</a></li>
                  </ul>
                </div>
                <div class="footer-block">
                  <div class="footer-block-title">Uses cases</div>
                  <ul class="list-reset mb-0">
                    <li><a href="#">Consectetur adipiscing</a></li>
                    <li><a href="#">Lorem Ipsum is place</a></li>
                    <li><a href="#">Excepteur sint</a></li>
                    <li><a href="#">Occaecat cupidatat</a></li>
                  </ul>
                </div>
                <div class="footer-block">
                  <div class="footer-block-title">Docs</div>
                  <ul class="list-reset mb-0">
                    <li><a href="#">The purpose of lorem</a></li>
                    <li><a href="#">Dummy text used</a></li>
                    <li><a href="#">Excepteur sint</a></li>
                    <li><a href="#">Occaecat cupidatat</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div
              class="footer-bottom space-between center-content-mobile text-xxs"
            >
              <nav class="footer-nav">
                <ul class="list-reset mb-0">
                  <li><a href="#">Contact</a></li>
                  <li><a href="#">About us</a></li>
                  <li><a href="#">FAQ's</a></li>
                  <li><a href="#">Support</a></li>
                </ul>
              </nav>
              <div class="footer-social">
                <ul class="list-reset">
                  <li>
                    <a href="#">
                      <svg
                        width="16"
                        height="16"
                        viewBox="0 0 16 16"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <title>LinkedIn</title>
                        <path
                          d="M15.3 0H.7C.3 0 0 .3 0 .7v14.7c0 .3.3.6.7.6h14.7c.4 0 .7-.3.7-.7V.7c-.1-.4-.4-.7-.8-.7zM4.7 13.6H2.4V6h2.4v7.6h-.1zM3.6 5c-.8 0-1.4-.7-1.4-1.4 0-.8.6-1.4 1.4-1.4.8 0 1.4.6 1.4 1.4-.1.7-.7 1.4-1.4 1.4zm10 8.6h-2.4V9.9c0-.9 0-2-1.2-2s-1.4 1-1.4 2v3.8H6.2V6h2.3v1c.3-.6 1.1-1.2 2.2-1.2 2.4 0 2.8 1.6 2.8 3.6v4.2h.1z"
                        />
                      </svg>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <svg
                        width="16"
                        height="16"
                        viewBox="0 0 16 16"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <title>Pinterest</title>
                        <path
                          d="M8 0C3.6 0 0 3.6 0 8c0 3.4 2.1 6.3 5.1 7.4-.1-.6-.1-1.6 0-2.3.1-.6.9-4 .9-4s-.2-.4-.2-1.1c0-1.1.7-2 1.5-2 .7 0 1 .5 1 1.1 0 .7-.4 1.7-.7 2.7-.2.8.4 1.4 1.2 1.4 1.4 0 2.5-1.5 2.5-3.7 0-1.9-1.4-3.3-3.3-3.3-2.3 0-3.6 1.7-3.6 3.5 0 .7.3 1.4.6 1.8v.4c-.1.3-.2.8-.2.9 0 .1-.1.2-.3.1-1-.5-1.6-1.9-1.6-3.1C2.9 5.3 4.7 3 8.2 3c2.8 0 4.9 2 4.9 4.6 0 2.8-1.7 5-4.2 5-.8 0-1.6-.4-1.8-.9 0 0-.4 1.5-.5 1.9-.2.7-.7 1.6-1 2.1.8.2 1.6.3 2.4.3 4.4 0 8-3.6 8-8s-3.6-8-8-8z"
                        />
                      </svg>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <svg
                        width="16"
                        height="16"
                        viewBox="0 0 16 16"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <title>GitHub</title>
                        <path
                          d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"
                        />
                      </svg>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </footer>
    </div>
    <script src="../js/landing.js"></script>
  </body>
</html>
